<template>
	<!-- 消息通知 -->
	<view class="msg">
		<view class="header">
			<view class="header-item">
				<view class="header-item-header">
					<view class="header-item-header-left">
						<image src="/static/img/msg.png"></image>
						<view>通知消息</view>
					</view>
					<view class="header-item-header-right">2025-11-11 09:22:22</view>
					<image class="header-item-header-arrow" @click="goDetail" src="/static/img/arrow-right.png" />

				</view>
				<view class="header-item-content">
					<view class="header-item-content-text">观看15秒广告即可解锁“立定跳远”项目成绩。</view>
					<view class="header-item-content-line"></view>
					<view class="header-item-content-row">
						<view class="header-item-content-row-cell">
							<view class="header-item-content-row-cell-value">9</view>
							<view class="header-item-content-row-cell-label">通知人数</view>

						</view>
						<view class="header-item-content-row-cell">
							<view class="header-item-content-row-cell-value">456</view>
							<view class="header-item-content-row-cell-label">已读人数</view>
						</view>
						<view class="header-item-content-row-cell">
							<view class="header-item-content-row-cell-value">66</view>
							<view class="header-item-content-row-cell-label">未读人数</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="record">
			<view class="record-cover">
				<view class="record-cover-title">
					<image src="/static/img/teacher-msg.png"></image>
					<view>未读家长列表</view>
				</view>
				<view class="record-cover-line"></view>
				<view class="list">
					<view class="list-item" v-for="item in 7">
						<view class="list-item-name">小夜曲</view>
						<image class="list-item-sex" src="/static/img/ic-sex-0.png"></image>
						<view class="list-item-phone">187567565785</view>
						<view class="list-item-class">3年二班</view>
						<view class="list-item-plan">
							<view class="list-item-plan-name">2025年第一次体测</view>
							<view class="list-item-plan-project">
								<view class="list-item-plan-project-label">
									50米跑
								</view>
								<view class="list-item-plan-project-label">
									立定跳远
								</view>
								<view class="list-item-plan-project-label">
									立定跳远
								</view>
								<!-- <view class="list-item-plan-project-label">
	    							立定跳远
	    						</view> -->
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import config from '@/config';
	export default {
		data() {
			return {

			}
		},
		methods: {
			goDetail() {

			}
		}
	};
</script>

<style lang="scss" scoped>
	.msg {
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.list {
		display: flex;
		flex-direction: column;
		align-items: center;

		&-item {
			width: 100%;
			border-radius: 20rpx;

			background: #F1FFFC;
			box-sizing: border-box;
			padding: 20rpx;
			margin-bottom: 20rpx;
			position: relative;

			&-name {
				font-weight: bold;
				font-size: 32rpx;
				color: #1A1A1A;
			}

			&-sex {
				position: absolute;
				left: 180rpx;
				top: 26rpx;
				width: 32rpx;
				height: 32rpx;

			}

			&-phone {
				margin-top: 16rpx;
				font-size: 28rpx;
				color: #1A1A1A;
			}

			&-class {
				position: absolute;
				right: 40rpx;
				top: 70rpx;
				color: #666;
				font-size: 28rpx;
			}



			&-plan {

				border-radius: 8px;
				padding: 12rpx 18rpx;
				box-sizing: border-box;
				background: #fff;

				&-name {
					color: #1A1A1A;
					font-size: 28rpx;
				}

				&-project {
					margin-top: 10rpx;
					display: flex;
					flex-wrap: wrap;


					&-label {
						width: 180rpx;
						box-sizing: border-box;
						padding: 4rpx 20rpx;
						color: #1A1A1A;
						font-size: 28rpx;
					}
				}
			}

		}
	}


	.record {
		margin-top: 20rpx;
		width: 100%;
		position: relative;
		display: flex;
		justify-content: center;
		position: relative;


		&-cover {
			min-height: 600rpx;
			width: 700rpx;
			border-radius: 28rpx;
			background: #FFFFFF;
			box-shadow: 0px 8rpx 20rpx 0px rgba(19, 88, 76, 0.1);
			box-sizing: border-box;
			padding: 20rpx;
			
			&-title {
					display: flex;
					margin-left: 10rpx;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					view {
						margin-left: 20rpx;
						font-size: 28rpx;
						color: #1A1A1A;

					}
				}
				
			&-line{
				margin: 20rpx 0 ;
				height: 1rpx;
				background: #e5e5e5;
				width: 100%;
			}	
		}

	}

	.header {

		display: flex;
		flex-direction: column;

		&-item {
			margin-top: 10rpx;
			padding-bottom: 20rpx;
			width: 704rpx;
			// height: 208rpx;
			border-radius: 12rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.1);

			&-content {

				// margin-left: 30rpx;
				&-line {
					margin-top: 14rpx;
					width: 100%;
					background-color: #D8D8D8;
					height: 1px;
				}

				&-row {
					z-index: 1;

					display: flex;
					margin-left: 35rpx;
					align-items: center;
					justify-content: space-around;

					&-cell {
						cursor: pointer;
						display: flex;
						flex-direction: column;
						align-items: center;

						&-value {
							margin-top: 16rpx;
							font-size: 36rpx;
							font-weight: bold;
							color: #000C17;
						}

						&-label {
							font-size: 24rpx;
							color: #9E9E9E;
						}

						&:active {
							opacity: 0.7;
						}
					}
				}

				&-text {
					margin-left: 30rpx;
					margin-top: 20rpx;
					color: #666;
					font-size: 28rpx;
				}
			}

			&-header {
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: #D8D8D8 solid 1rpx;
				position: relative;

				&-arrow {
					position: absolute;
					right: 10rpx;
					top: 30rpx;
					width: 28rpx;
					height: 28rpx;
				}

				&-left {
					display: flex;
					margin-left: 30rpx;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					view {
						margin-left: 20rpx;
						font-size: 28rpx;
						color: #1A1A1A;

					}
				}

				&-right {
					margin-right: 46rpx;
					font-size: 24rpx;
					color: #1A1A1A;
				}
			}
		}
	}
</style>